<template>
  <div class="add-wrap" v-loading="loading">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <div class="project">
      <el-form
        :model="params"
        :rules="basicRules"
        ref="formRul"
      >
        <div class="project-part">
          <div
            class="project-part-title project-part-title1"
          >
            基本信息
          </div>
          <div class="project-part-content">
            <el-row :gutter="24">
              <el-col
                :sm="24"
                :md="24"
                :lg="isEdit ? 12 : 8"
                :xl="isEdit ? 8 : 6"
              >
                <el-form-item label="专家姓名" prop="name">
                  <el-input
                    v-model="params.name"
                    :readonly="!isEditType"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col
                :sm="24"
                :md="24"
                :lg="isEdit ? 12 : 8"
                :xl="isEdit ? 8 : 6"
              >
                <el-form-item label="专家类型">
                  <el-select
                    placeholder=""
                    v-model="params.expertType"
                    clearable
                    :disabled="!isEditType"
                  >
                    <el-option
                      v-for="item in expertTypeOptions"
                      :key="item.dictValue"
                      :label="item.dictText"
                      :value="item.dictValue"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :sm="24"
                :md="24"
                :lg="isEdit ? 12 : 8"
                :xl="isEdit ? 8 : 6"
              >
                <el-form-item label="领域方向">
                  <el-select
                    placeholder=""
                    v-model="params.fieldDirection"
                    clearable
                    :disabled="!isEditType"
                  >
                    <el-option
                      v-for="item in fieldDirectionOptions"
                      :key="item.dictValue"
                      :label="item.dictText"
                      :value="item.dictValue"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :sm="24"
                :md="24"
                :lg="isEdit ? 12 : 8"
                :xl="isEdit ? 8 : 6"
              >
                <el-form-item label="人才类型">
                  <el-select
                    placeholder=""
                    v-model="params.talentsType"
                    clearable
                    :disabled="!isEditType"
                  >
                    <el-option
                      v-for="item in talentsTypeOptions"
                      :key="item.dictValue"
                      :label="item.dictText"
                      :value="item.dictValue"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :sm="24"
                :md="24"
                :lg="isEdit ? 12 : 8"
                :xl="isEdit ? 8 : 6"
              >
                <el-form-item label="工作单位">
                  <el-input
                    v-model="params.workUnit"
                    :readonly="!isEditType"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col
                :sm="24"
                :md="24"
                :lg="isEdit ? 12 : 8"
                :xl="isEdit ? 8 : 6"
              >
                <el-form-item label="职务职称">
                  <el-input
                    v-model="params.officialCapacity"
                    :readonly="!isEditType"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col
                :sm="24"
                :md="24"
                :lg="isEdit ? 12 : 8"
                :xl="isEdit ? 8 : 6"
              >
                <el-form-item label="所学专业">
                  <el-input
                    v-model="params.speciality"
                    :readonly="!isEditType"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col
                :sm="24"
                :md="24"
                :lg="isEdit ? 12 : 8"
                :xl="isEdit ? 8 : 6"
              >
                <el-form-item
                  label="联系方式"
                  prop="contactWay"
                >
                  <el-input
                    v-model="params.contactWay"
                    :readonly="!isEditType"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col
                :sm="24"
                :md="24"
                :lg="isEdit ? 12 : 8"
                :xl="isEdit ? 8 : 6"
              >
                <el-form-item label="牵头单位">
                  <el-input
                    v-model="params.leadingUnit"
                    :readonly="!isEditType"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
    </div>
    <div class="operate" v-if="isEditType">
      <el-button @click="submitInfo()" class="save-btn"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  addProjectInfo,
  queryProjectDetail,
  queryCheckInfo,
  addCheckInfo
} from '@/api/projectMessage'
import { queryOptions } from '@/api/dict'
import { getDictOptions } from '@/utils/dict'
import { isAdmin, isEnterprise } from '@/utils/permission'
import cacheUtil from '@/utils/cache'
import Breadcrumb from '@/components/breadcrumb'
import { addEditZhuanJia, getDetail } from '@/api/zhuanjia'
import { required } from '@/utils/formrule'
export default {
  props: {
    pkid: String,
    isView: Boolean,
    isCheck: Boolean,
    title: String,
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      params: {},
      typeOption: [],
      basicRules: {
        name: [
          {
            required: true,
            message: '请输入专家姓名',
            trigger: 'blur'
          }
        ],
        contactWay: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback()
              }
              const phoneReg =
                /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
              const telReg =
                /^(0[0-9]{2,3}-)?([2-9][0-9]{6,7})+(-[0-9]{1,4})?$/
              if (
                !phoneReg.test(value) &&
                !telReg.test(value)
              ) {
                if (!phoneReg.test(value)) {
                  callback(new Error('请输入正确手机号'))
                } else {
                  callback(new Error('请输入正确的座机号'))
                }
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      },
      expertTypeOptions: [],
      talentsTypeOptions: [],
      fieldDirectionOptions: []
    }
  },
  components: {
    Breadcrumb
  },
  computed: {
    isAdmin() {
      return isAdmin()
    },
    isEnterprise() {
      return isEnterprise()
    },
    titles() {
      return ['专家管理', this.title]
    },
    isEditType() {
      // console.log(this.$route.query.isEdit)
      if (this.$route.query.isEdit == 'true') {
        return true
      } else {
        return false
      }
    },
    expertType() {
      return this.params.expertType
    }
  },
  watch: {
    expertType: async function (val) {
      const data = await getDictOptions(val)
      this.fieldDirectionOptions = data
      console.log(data)
    }
  },
  mounted() {
    this.queryTypeOptions()
    const pkid = this.pkid
    if (pkid) {
      this.projectId = pkid
      this.getZhuanJiaDetail(pkid)
    }
  },
  methods: {
    // 提交项目信息
    submitInfo() {
      // console.log()
      this.$refs.formRul.validate((res) => {
        console.log(res)
        if (res) {
          const param = this.params
          addEditZhuanJia(param)
            .then((res) => {
              console.log(res)
              this.$message.success(
                param.pkid ? '编辑成功' : '新增成功'
              )
              this.$router.back()
            })
            .catch((err) => {
              console.log(err)
              this.$message.error(
                param.pkid ? '编辑失败' : '新增失败'
              )
              this.$router.back()
            })
        }
      })
    },
    getZhuanJiaDetail(pkid) {
      getDetail({ pkid }).then((res) => {
        console.log(res)
        this.params = { ...this.params, ...res.data }
      })
    },
    // 专家类型
    async queryTypeOptions() {
      const data = await getDictOptions(
        'expertType,zhkc_rclx'
      )
      this.expertTypeOptions = this.policySixOneOptions =
        data.filter(
          (i) => i.dictCode === 'expertType'
        )[0].resourceDictItems
      this.talentsTypeOptions = this.policySixOneOptions =
        data.filter(
          (i) => i.dictCode === 'zhkc_rclx'
        )[0].resourceDictItems
    }
  }
}
</script>

<style lang="scss" scoped>
.add-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: #fff;
}

.project {
  flex: 1 1 auto;
  overflow: auto;
  box-sizing: border-box;
  padding: 20px 10px;
  &-part {
    margin-top: 10px;

    &-title {
      color: #4c565c;
      line-height: 18px;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 24px;
      position: relative;
      box-sizing: border-box;
      padding: 0 0 0 11px;
      line-height: 16px;
      &::before {
        content: '';
        width: 4px;
        height: 16px;
        background: linear-gradient(
          180deg,
          #40ebff,
          #bcf8ff
        );
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    &-title1 {
      margin-left: 10px;
    }

    &-content {
      padding-left: 10px;
    }
  }
}
.operate {
  width: 100%;
  height: 78px;
  background: #fff;
  border-top: 1px solid #f1f1f1;
  box-sizing: border-box;
  padding: 0 30px;
}

.save-btn {
  float: right;
  right: 20px;
  background: #497fa3;
  border: 1px solid #497fa3;
  width: 104px;
  color: white;
  font-size: 14px;
  margin-top: 20px;
  width: 104px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-text {
  font-size: 14px;

  &-count {
    color: #00baff;
  }
}

.behavior {
  border-top: 1px solid #eeeff5;
  // border-bottom: 1px solid #eeeff5;
  padding: 20px 0px;
  max-height: 550px;
  overflow: scroll;
  font-size: 14px;

  &-item {
    display: flex;
    // align-items: center;
    font-size: 14px;
    font-family: PingFang SC;
    margin-left: 30px;
    margin-bottom: 10px;

    .line {
      width: 9px;
      text-align: center;
      margin-right: 30px;
    }

    &-circle {
      margin-right: 24px !important;
      width: 10px;
      height: 10px;
      background: #ebf1f8;
      border-radius: 50%;
      // margin-top: -5px;
    }

    &-line {
      width: 1px;
      margin-left: 4px !important;
      margin-top: -70px !important;
      height: 70px;
      background: #e1e9f4;
    }

    &-time {
      font-weight: 500;
      padding-right: 20px;
      width: 200px;
      color: #010101;
    }

    &-result,
    &-advice,
    &-user {
      font-weight: 500;
      padding-right: 20px;
      width: 300px;
      color: #010101;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
    }

    &-advice,
    &-user {
      font-size: 14px;
      font-weight: 400;
      color: #4c565c;
      margin-top: 5px;
    }

    // &-behavior {
    //   font-weight: 400;
    //   color: #505967;
    //   height: 50px;
    //   padding-left: 20px;
    //   width: 75%;
    //   line-height: 50px;
    // }
  }
}

::v-deep {
  .el-form-item__label {
    line-height: 14px !important;
    padding-bottom: 10px;
  }
  .el-form-item__content {
    line-height: auto !important;
  }
  .el-input__inner {
    // background: #f6f9fc !important;
    color: #4c565c !important;
    height: 32px !important;
    width: 320px !important;
    // margin-left: 10px;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 40px !important;
      margin-top: -25px !important;
    }

    .el-range-separator {
      width: 20px !important;
      margin-top: -5px !important;
    }

    .el-range-input {
      // background: #f6f9fc !important;
    }
  }

  .el-input.is-disabled .el-input__inner {
    background: #e8eff7 !important;
  }

  .el-button.is-disabled {
    background: #c0c4cc !important;
    border-color: #c0c4cc !important;
  }

  .el-input-group__append {
    position: absolute;
    height: 20px;
    line-height: 20px;
    width: 80px;
    text-align: right;
    top: 4px;
    left: 235px;
    border-color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
  }

  .el-input__suffix {
    top: 1px !important;
    right: 8px !important;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 30px;
    }
    .is-reverse {
      line-height: 15px !important;
    }
  }

  .el-select {
    width: 320px !important;

    .el-input__inner {
      width: 320px !important;
      // margin-left: 10px;
    }

    .el-input__suffix {
      // top: 4px !important;
      .el-input__icon {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
        line-height: 15px;
      }
      .is-reverse {
        line-height: 35px !important;
      }
    }

    .is-focus {
      .el-input__suffix {
        top: -3px !important;
      }
    }
  }

  .el-textarea__inner {
    width: 320px !important;
    // background: #f6f9fc !important;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
  }

  .el-breadcrumb__inner {
    color: #606266 !important;
    font-weight: 400 !important;
  }
}
</style>
